<template>
<div class="trade">
    <van-sticky>
    <div class="header">
        <div class="title">
        <van-icon class="icon-home" name="wap-home-o" />
        <span>网易严选</span>
        <van-icon class="icon-search" name="search" />
        <van-icon class="icon-shopping-cart-o" name="shopping-cart-o" badge="6"/>
    </div>
    </div>
</van-sticky>
<!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar
 left-icon="volume-o"
  :scrollable="false"
  text="因疫情影响,部分地区无法配送通告"
/>
<div class="address-wrap">
</div>
 <div class="address">
<div class="address-top">
  <div>姓名</div>
  <div class="active">默认</div>
</div>
<div class="address-bottom">
  <div>1 8 8 * * 9 9 0 3</div>
  <div>北京市昌平区</div>
</div>
<div>
  <van-icon name="arrow" />
</div>



 </div>
<div class="youhui-quan">
  <div class="youhui">
    <div class="youhui-top">
      <span>暂无可用优惠券</span>
      <span class="num">0张</span>
       <span>
         <van-icon name="arrow" />
       </span>
    </div>
    <div class="youhui-center">
      <span>
        <input type="checkbox" class="checked">
      </span>
      <span class="monery">礼品卡余额 0.00</span>
    
      <span>
         <van-icon name="arrow" />
       </span>
    </div>
    <div class="youhui-bottom">
       <span>
        <input type="checkbox"  class="checked">
      </span>
       <span>
         <van-icon name="arrow" />
       </span>
    </div>
    
  </div>
</div>
<div class="shop-item">
   <div class="shop-num">
      <span>商品合计</span>
      <span>499</span>
    </div>
      <div class="shop-num">
      <span>邮费</span>
      <span>0.00</span>
    </div>
      <div class="shop-num">
      <span>活动优惠</span>
      <span>-120</span>
    </div>
      <div class="shop-num">
      <span>优惠券</span>
      <span>-00</span>
    </div>
      <div class="shop-num shop-last">
      <input type="checkbox" class="checked">
      <span class="fapiap">我要开发票</span>
      <span><van-icon name="arrow" /></span>
    </div>
</div>
<div class="shop-info">
  <div class="boxInfo">
    <span class="shop-info-left">包裹1</span>
    <span class="shop-info-right">预计明天2月15日送达</span>
    </div>
    <div class="shopping-info-item">
    <img src="../Cart/static/image/shop.png" alt="">
  <div class="shop-sale">
    <div class="sale"><span class="every">每日抄底</span>air line真无线耳机,空气感佩戴,全新升级</div>
 <div class="shop-color">黑色</div>
 <div class="shopping-price"><span class="price">179.00</span><span class="deletePrice">219</span></div>
  </div>

</div>
</div>
<div class="isChecked">
  <div class="ch">
    <input type="checkbox">
    <span class="agree">我已同意</span><span class="wangyi">《网易严选服务协议》</span></div>
</div>
<div class="shopping">
  <div class="footer-last">
    <span class="pay">应付 379</span>
    <span class="submit-order">提交订单</span>
  </div>
</div>
</div>
</template>

<script>



export default {


};
</script>

<style lang="less" scoped>
.trade{
  height: 100vh;
  background: rgb(248, 249, 249);
}
.header {
  width: 100%;
  height: 43px;
  border-bottom: 2px solid #fafafa;
  background-color: #fafafa;
  .title {
    line-height: 43px;
    width: 92%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .icon-home {
      float: left;
      line-height: 43px;
    }
    span {
      width: 100%;
      margin-left: 100px;
      font-size: 20px;
    }
    .icon-search {
      float: right;
      line-height: 43px;
      margin-right: 15px;
    }
    .icon-shopping-cart-o {
      line-height: 43px;
      .van-info {
        margin-top: 10px;
      }
    }
  }
}
.van-notice-bar{
  font-size: 14px;
}
.address-wrap{
  position: relative;
      &::before{
    position: absolute;
       right: 0;
      bottom: 0;
         left: 0;
          height: 2px;
          background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%); //最重要是这行
           background-size: 80px;
            content:'';
        }
}
.address{
padding: 10px 15px;
display: flex;
justify-content: space-between;
border: 1px solid rgb(248, 237, 237);
background: white;
margin-bottom: 10px;
.address-top{
  .active{
    width: 30px;
    height: 20px;
    border: 1px solid rgb(214, 28, 34);
    color:rgb(214, 28, 34);
    font-size: 14px;
    text-align: center;
    font-weight: 700;
  }
}
.address-top :nth-child(1){
  font-size: 16px;
  
}
.address-bottom :nth-child(1){
  font-size: 16px;
  margin-right: 120px;
}
.address-bottom :nth-child(2){
  font-size: 14px;
  
}
}
.youhui-quan{
  background: white;
  padding: 10px 15px;
  .youhui{
    height: 160px;
    
    .youhui-top{
      display:flex;
      justify-content: space-between;
      font-size: 18px;
      color: #333;
       height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      .num{
        margin-left: 140px;
      }
    
    }
    .youhui-center,.youhui-bottom{
      display:flex;
      justify-content: space-between;
      font-size: 18px;
      color: rgb(216, 225, 231);
     height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ccc;
      .monery{
        margin-right: 170px;
      }
    .checked{
      display: inline-block;
      width: 30px;
      height: 20px;
      line-height: 45px;
      margin-top:12px;
      color: #ccc;
    }
    }
  .youhui-bottom{
    margin-bottom: none;
  }
    
  }

}
.shop-item{
   background: white;
  padding: 10px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  .shop-num{
       display:flex;
      justify-content: space-between;
      font-size: 18px;
      color: rgb(103,102,83);
    height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ccc;
     .fapiap{
        margin-right: 200px;
     }

    .checked{
      display: inline-block;
      width: 30px;
      height: 20px;
      line-height: 45px;
      margin-top:10px;
    }
  }
}
.shop-info{
padding-left:10px;
  background: white;
 
 .shopping-info-item{
   display: flex;
   justify-content: space-around;
   .shop-sale{
     margin-left:10px;
     .shopping-price{
      
       .price{
          font-size: 10px;
          font-weight: 700;
       }
       .deletePrice{
        color: #333;
         text-decoration:line-through;
          font-size: 10px;
          margin-left: 5px;
       }
     }
     .shop-color{
       font-size: 14px;
       color: #ccc;
     }
     .sale{
       font-size:18px;
       margin-top: 10px;
       .every{
         font-size: 14px;
         color: orange;
       }
     }
   }
   img{
     width: 100px;
     height: 100px;
     border-radius: 10px 10px 10px 10px;
    margin-top: 10px;
   }

 }
 
  .boxInfo{
    height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ccc;
  
      .shop-info-left{
    font-size: 16px;
  }
  .shop-info-right{
    font-size: 6px;
    margin-left: 15px;
  }
  }

}
.isChecked{
  background: rgb(248, 249, 249);
  padding: 2px 0;
  .ch{
      margin: 15px 10px;
      .agree{
        font-size: 14px;
        color: #ccc;
        margin-left: 10px;
      }
      .wangyi{
        font-size: 16px;
       
      }
  }
}
.shopping{
height: 30px;
line-height: 30px;
 background: white;
  .footer-last{
 margin-top: 10px;
  
 

  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  
 
  .pay{
    font-size: 20px;
    color: red;
  line-height: 40px;
  padding-top: 10px;
  padding-left: 10px;

  }
  .submit-order{
    color: white;
    background: rgb(221, 26, 33);
    width: 120px;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    font-size: 18px;
    text-align: center;
   
  }
}
}

</style>